<template>
	<view :style="{marginBottom:`${item.style.marginBottom}px`,marginTop:`${item.style.marginTop}px`}">
		<scroll-view :scroll-x="true" v-if="item.picStyle == 1"
			:style="{height: `${item.titleStyle == 2? '130':'95'}px`}" :refresher-enabled="false" :scroll-y="false"
			style="touch-action: none;">
			<view class="scroll">
				<view v-for="(i,index) in item.picData" :key="index" class="image-box" @click="gourl(i)">
					<image :src="i.cover"
						:class="{winth4:item.singleImgNum == 4,winth3:item.singleImgNum == 3,winth2:item.singleImgNum == 2,winth1:item.singleImgNum == 1}"
						:style="{height:`${item.imageStyle.height}px`,borderRadius:`${item.imageStyle.borderRadius}px`}">
					</image>
					<view class="" v-if="item.titleStyle == 3">

					</view>
					<view class="" v-if="item.titleStyle == 2">
						<view
							:style="{lineHeight:`${item.titleCss.lineHeight}px`,fontSize:`${item.titleCss.fontSize}px`,color:item.titleCss.color}">
							{{i.title}}
						</view>
						<view style="font-size: 24rpx;" :style="{color:item.briefFontcolor}">
							{{i.brief}}
						</view>
					</view>
					<view class="" v-if="item.titleStyle == 1">
						<view class="title"
							:style="{textAlign:item.style.textAlign,fontSize:`${item.titleCss.fontSize}px`,color:item.titleCss.color}">
							{{i.title}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="list-box" v-if="item.picStyle == 2">
			<view class="list" v-for="(i,index) in item.picData" :key="index" @click="gourl(i)">
				<image :src="i.cover"
					:class="{wintht4:item.singleImgNum == 4,wintht3:item.singleImgNum == 3,wintht2:item.singleImgNum == 2,wintht1:item.singleImgNum == 1}"
					mode=""
					:style="{height:`${item.imageStyle.height}px`,borderRadius:`${item.imageStyle.borderRadius}px`}">
				</image>
				<view
					:style="{lineHeight:`${item.titleCss.lineHeight}px`,fontSize:`${item.titleCss.fontSize}px`,color:item.titleCss.color}">
					{{i.title}}
				</view>
			</view>
		</view>
		<contact v-if="contshow == true" @hide="hidecont"></contact>
	</view>
</template>

<script>
	import contact from "@/components/contact.vue"
	export default {
		components: {
			contact,
		},
		data() {
			return {
				urlvr: "",
				contshow: false
			}
		},
		created() {
			this.geturlvr()
		},
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		methods: {
			hidecont() {
				this.contshow = false
			},
			geturlvr() {
				const params = {
					map: 'applet_promotional_video'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						console.log(res, 'vr')
						this.urlvr = res.data.data.vrurl
					} else {

					}
				})
			},
			gourl(i) {
				console.log(i)
				if (i.link.url.indexOf('commonViewTab') !== -1) {
					uni.navigateTo({
						url: '/pages/VR/index?url=' + this.urlvr
					})
				}
				if (i.link.url.indexOf('searchList') !== -1) {
					uni.navigateTo({
						url: '/pages/goods/index'
					})
				}
				if (i.link.url.indexOf('allFlGoods') !== -1) {
					uni.navigateTo({
						url: '/pages/searchbox/index?name=' + 'goods'
					})
				}
				if (i.link.url.indexOf('telBook') !== -1) {
					uni.navigateTo({
						url: '/pages/telBook/index'
					})
				}
				if (i.link.url.indexOf('cardRank') !== -1) {
					this.goToCard()
				}
				if (i.link.url.indexOf('generalForm') !== -1) {
					this.contshow = true
				}
			},
			goToCard() {
				const params = {
					map: 'applet_business_card_detail'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.navigateTo({
							url: '/pages/user/card/details/index'
						})
						
					} else {
						uni.navigateTo({
							url: '/pages/user/card/index'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.list-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20rpx;
		text-align: center;

		.list {
			text-align: center;
			margin-right: 10rpx;

			view {
				padding-bottom: 15rpx;
			}
		}
	}

	.wintht4 {
		width: 160rpx;
	}

	.wintht3 {
		width: 220rpx;
	}

	.wintht2 {
		width: 340rpx;
	}

	.wintht1 {
		width: 710rpx;
	}

	.winth1 {
		width: 720rpx;
	}

	.winth2 {
		width: 500rpx;
	}

	.winth3 {
		width: 270rpx;
	}

	.winth4 {
		width: 190rpx;
	}

	.scroll {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx;

		.image-box {
			margin-right: 20rpx;
			position: relative;

			image {
				border-radius: 10rpx;
			}

			.title {
				box-sizing: border-box;
				width: 100%;
				left: 0rpx;
				bottom: 8rpx;
				padding: 5rpx;
				position: absolute;
				background-color: rgba(0, 0, 0, 0.5);
			}
		}
	}
</style>
